<template>
	<view class="account">
		<view class="header">
			<image :src="data && data.headPicture ? data.headPicture : '../../../static/img/defalut_tx.png'" @click="chooseImage()" class="headPortait"></image>
			<view class="healthName">{{data.realName}} <image src="@/static/img/homePage/healthIcon@2x.png" v-if="data && data.healthRank == 1"></image> <image src="@/static/img/homePage/healthExperts.png" v-else style="width: 146upx;"></image></view>
		</view>
		
		<view class="appellationBox">
			<view class="item">
				<text>称谓：</text>
				<input type="text" v-model="data.appellations" placeholder="请输入你的称谓">
			</view>
			<view class="item">
				<text>公司/科室：</text>
				<input type="text" v-model="data.department" placeholder="请输入你的公司/科室">
			</view>
			<view class="item">
				<text>手机号：</text>
				<input type="text" :value="data.phone" placeholder="请输入你的手机号">
			</view>
		</view>
		
		<!-- 擅长管理 -->
		<view class="goodAt">
			<view class="adeptAt">擅长管理:</view>
			<view class="tags">
				<text v-for="(item,index) in tags" :key="index" :class="item.checked?'on':''" @click="changeTag(item)">{{item.valuex}}</text>
			</view>
		</view>
		
		<!-- 个人简介 -->
		<view class="personalProfile">
			<view>个人简介：</view>
			<editor id="editor" v-model="data.individual" class="ql-container" placeholder="请输入你的简介" @ready="onEditorReady"></editor>
		</view>
		
		<!-- 资质证书 -->
		<view class="certificate">
			<view class="book">资质证书：</view>
			<view class="img">
				<view class="nav" v-for="(item,index) in imgList" :key="index">
					<image :src="item" alt="" style="width:100%;height:100%;margin:0;" mode="aspectFill"></image>
					<i @click="delimg(item,index)">
						<image src="@/static/img/headFeature/delete.png" mode="" class="del"></image>
					</i>
				</view>
				<view class="nav" v-if="imgList.length < 9"  @click="addImage">
					<image src="../../../static/img/member/attention.png"></image>
				</view>
			</view>
		</view>
		
		<!-- 保存 -->
		<view class="save" @click="save">保存</view>
	</view>
</template>

<script src="@/static/js/headFeatures/settings/accountInformation.js"></script>

<style lang="scss" scoped>
	.account {
		width: 750upx;
		min-height: calc(100vh - 44px);
		background-color: #F8F8F8;
		padding-bottom: 40px;
		.header {
			background: url(@/static/img/homePage/userInformationBj.png) no-repeat;
			background-size: 100% 100%;
			width: 702upx;
			height: 170upx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			padding: 0 20upx;
			box-sizing: border-box;
			.headPortait {
				width: 100upx;
				height: 100upx;
				border-radius: 20upx;
			}
			.healthName {
				flex: 1;
				margin-left: 32upx;
				color: #FFFFFF;
				font-size: 34upx;
				font-weight: bold;
				display: flex;
				align-items: center;
				image {
					width: 126upx;
					height: 32upx;
					margin-left: 21upx;
				}
			}
		}
		.appellationBox {
			width: 702upx;
			background: #FFFFFF;
			border-radius: 14upx;
			margin: 24upx auto;
			box-sizing: border-box;
			.item {
				height: 110upx;
				border-bottom: 1upx solid #E7E7E7;
				padding: 0 20upx;
				display: flex;
				align-items: center;
				text {
					color: #333333;
					font-size: 30upx;
					width: 180upx;
				}
				input {
					flex: 1;
					height: 100%;
					font-size: 30upx;
				}
			}
			.item:last-child {
				border: none;
			}
			
		}
		.goodAt,.personalProfile,.certificate {
			width: 702upx;
			background: #FFFFFF;
			border-radius: 14upx;
			margin: 24upx auto;
			box-sizing: border-box;
			display: flex;
			padding: 30upx 20upx 0;
			.adeptAt,view,.book {
				color: #333333;
				font-size: 30upx;
			}
			.tags {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				text {
					min-width: 132upx;
					height: 48upx;
					line-height: 42upx;
					border: 1upx solid #04BFAB;
					border-radius: 24upx;
					color: #04BFAB;
					font-size: 26upx;
					text-align: center;
					margin: 0 0 30upx 46upx;
				}
				.on {
					background-color: #04BFAB;
					color: #FFFFFF;
				}
			}
			#editor {
				flex: 1;
				min-height: 180upx;
				height: 100%;
				/deep/ .ql-editor.ql-blank::before {
				  font-style: normal !important;
				}
			}
			.img {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				margin-left: 34upx;
				.nav {
					width: 130upx;
					height: 156upx;
					border-radius: 6upx;
					margin-right: 44upx;
					margin-bottom: 38upx;
					position: relative;
					.del{
						position: absolute;
						width: 32upx;
						height: 32upx;
						margin: 0;
						right: -12upx;
						top: -12upx;
					}
					image {
						width: 28upx;
						height: 28upx;
						margin: 54upx auto;
						display: block;
					}
					&:nth-last-child(1){
						border: 1upx dashed #38CB97;
					}
				}
				.nav:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
		.personalProfile {
			padding-bottom: 30upx;
		}
		.save {
			width: 486upx;
			height: 90upx;
			background-color: #04BFAB;
			line-height: 90upx;
			text-align: center;
			margin: 91upx auto 0;
			color: #FFFFFF;
			border-radius: 45upx;
			font-size: 36upx;
		}
	}
	
</style>